<template>
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <div class="text-center mb-12">
      <h1 class="text-4xl font-bold mb-4">联系我</h1>
      <p class="text-xl text-gray-600">
        有任何问题或合作机会？随时给我发消息！
      </p>
    </div>
    
    <div class="grid md:grid-cols-2 gap-12">
      <div>
        <h2 class="text-2xl font-semibold mb-6">发送消息</h2>
        <form @submit.prevent="handleSubmit" class="space-y-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              姓名
            </label>
            <input 
              v-model="form.name"
              type="text" 
              required
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              邮箱
            </label>
            <input 
              v-model="form.email"
              type="email" 
              required
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              主题
            </label>
            <input 
              v-model="form.subject"
              type="text" 
              required
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              消息
            </label>
            <textarea 
              v-model="form.message"
              rows="4" 
              required
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            ></textarea>
          </div>
          
          <button 
            type="submit" 
            :disabled="loading"
            class="w-full btn-primary disabled:opacity-50"
          >
            {{ loading ? '发送中...' : '发送消息' }}
          </button>
          
          <div v-if="success" class="text-green-600 text-center">
            消息发送成功！我会尽快回复您。
          </div>
          
          <div v-if="error" class="text-red-600 text-center">
            {{ error }}
          </div>
        </form>
      </div>
      
      <div>
        <h2 class="text-2xl font-semibold mb-6">联系方式</h2>
        
        <div class="space-y-6">
          <div class="card">
            <h3 class="text-lg font-semibold mb-3">邮箱</h3>
            <p class="text-gray-600">your.email@example.com</p>
          </div>
          
          <div class="card">
            <h3 class="text-lg font-semibold mb-3">GitHub</h3>
            <a href="https://github.com/yourusername" target="_blank" class="text-blue-500 hover:text-blue-700">
              github.com/yourusername
            </a>
          </div>
          
          <div class="card">
            <h3 class="text-lg font-semibold mb-3">LinkedIn</h3>
            <a href="https://linkedin.com/in/yourusername" target="_blank" class="text-blue-500 hover:text-blue-700">
              linkedin.com/in/yourusername
            </a>
          </div>
          
          <div class="card">
            <h3 class="text-lg font-semibold mb-3">位置</h3>
            <p class="text-gray-600">中国，北京</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const form = ref({
  name: '',
  email: '',
  subject: '',
  message: ''
})

const loading = ref(false)
const success = ref(false)
const error = ref('')

const handleSubmit = async () => {
  loading.value = true
  error.value = ''
  
  try {
    // 这里可以集成实际的邮件服务，如EmailJS、SendGrid等
    // 目前只是模拟发送
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    console.log('发送的消息:', form.value)
    success.value = true
    
    // 重置表单
    form.value = { name: '', email: '', subject: '', message: '' }
    
    setTimeout(() => {
      success.value = false
    }, 5000)
    
  } catch (err) {
    error.value = '发送失败，请稍后重试'
  } finally {
    loading.value = false
  }
}
</script>